<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/headMain.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>用户管理</title>
  </head>
  		<script type="text/javascript">
  		function _addUser() {
  			_clear();
			$("#_addDIV").dialog({
				height:400,width:500,resizable:false,modal:true, //这里就是控制弹出为模态                
				buttons: {
					"确定":function() {
						$.post("${base}/user_addUesr", 
							$('#_addForm').serialize(), 
							function(response) {
								if (response && response.success) {
									alert(response.message);
									$("#_userList").jqGrid('setGridParam',{url: '${base}/user_getUserList'}).trigger("reloadGrid");
								} else {
									alert(response.message);
								}
						}, "json");
						$(this).dialog("close");
					},                    
					"取消":function() {
						$(this).dialog("close");
					}                
				}            
			});
		}
		
		function _delUser(id) {
			if (confirm("确认删除该用户吗？")) {
				$.post("${base}/user_delete/" + id, 
					function(data) {
						if (data && data.success) {
							alert(data.message);
							$("#_userList").jqGrid('setGridParam',{url: '${base}/user_getUserList'}).trigger("reloadGrid");
						} else {
							alert(response.message);
						}
					}, 
				"json");
			}
		}
		
		function _updateUser(id) { 
  			//单击修改链接的操作
  			var model = $("#_userList").jqGrid('getRowData', id);
			$("#m_regname").val(model.regname);
			$("#m_name").val(model.name);
			$("#m_email").val(model.email);
			$("input[name='status'][value='" + model.status + "']").attr("checked", true);
			$("#_modDIV").dialog({
				height:400,width:500,resizable:false,modal:true, //这里就是控制弹出为模态                
				buttons: {
					"确定":function() {
						$.post("${base}/user_updateUser/" + id, 
							$('#_modForm').serialize(), 
							function(response) {
								if (response && response.success) {
									alert(response.message);
									$("#_userList").jqGrid('setGridParam',{url: '${base}/user_getUserList'}).trigger("reloadGrid");
								} else {
									alert(response.message);
								}
						}, "json");
						$(this).dialog("close");
					},                    
					"取消":function() {
						$(this).dialog("close");
					}                
				}            
			});
		}
		
		$(function() {
				$("#_userList").jqGrid({
				   	url: "${base}/user_getUserList",
					datatype: "json",
				   	colNames:['ID','用户名称','姓名','邮箱','是否有效','操作'],
				   	colModel:[
				   		{name:'id',index:'id', width:55, align:'center',hidden:true},
				   		{name:'regname', index:'regname', align:'center'},
				   		{name:'name', index:'name', align:'center'},
				   		{name:'email', index:'email',width:200, align:'center'},
				   		{name:'status', index:'status', editable: true, formatter:'select', editoptions:{value:"0:否;1:是"}, align:'center'},
				   		{name:'ctrl', index:'ctrl', align:'center', sortable:false}
				   	],
				   	width:_width_,
				   	height:230,
				   	rowNum:10,
				   	rowList:[10,20,30],
				   	pager: '#_userBar',
				   	sortname: 'id',
				    viewrecords: true,
				    sortorder: "desc",
					multiselect: false,
					jsonReader: {
						repeatitems : false
					},
					rownumbers : true,
					caption: "用户管理",
					afterInsertRow : function(rowid, data) {
						$("#_userList").jqGrid('setCell', rowid, 'ctrl', '<span style="cursor:pointer;" onclick="_updateUser(' + data.id + ');">修改</span>|<span style="cursor:pointer;" onclick="_delUser(' + data.id + ');">删除</span>', {color:'green'});
					}
				});
				$("#_userList").jqGrid('navGrid','#_userBar',{add : false, del : false, edit : false, refresh : true, search : false});
		});
		
		function _clear() {
			$("#a_regname").val("");
			$("#a_name").val("");
			$("#a_email").val("");
		}
		</script>
	<body>
	<table cellpadding="0" cellspacing="0" border="0" width="99%" style="height:100%;">
		<tr><td style="height:10px; overflow:hidden;" colspan="2"></td></tr>
		<tr>
			<!--右边内容-->
			<td width="*" valign="top" class="contList">

				<!-- begin -->
					<div id="_shopManagerDiv">
							<div class="mainInfo">
								<div class="subScroll" id="subScroll"><!-- 滚动条 -->
									<div class="searchList">
										<ul>
											<li><span>XXX：</span>
												<input type="text" id="" name="" />
											</li>
											<li><span>XX：</span>
												<input type="text" id="" name="" />
											</li>
										</ul>
										<div class="clearfloat"></div>
										<div class="btn">
											<strong><em class="searchIcon"></em><input type="button" value="查询" class="btn" id="" /></strong>
											<strong><em class="clearIcon"></em><input type="button" value="清空查询" class="btn"  onclick="" /></strong>
										</div>
										<div class="searchListBg"></div>
									</div>
									<div class="mainTable">
										<table id="_userList"></table><!-- 显示列表内容 -->
										<div id="_userBar"></div>
										<div class="contBtn btn">
											<strong><em class="addIcon"></em><input type="button" value="增加用户" class="btn" onclick="_addUser();"/></strong>
										</div>
											<div class="minwidth_div"></div>
										</div>
									</div>
								</div>
					</div>
				<!-- end  -->
				
				
				
				<!-- 修改用户 -->
				<div id="_addDIV" title="增加用户" style="display:none;">
					<form id="_addForm" method="post" style="margin-top: 20px;padding:2px;">
					<p>用户名：<input type="text" id="a_regname" name="regname" class="validate[required]" /></p>
					<p>姓名：<input type="text" id="a_name" name="name" class="validate[required]" /></p>
					<p>邮箱：<input type="text" id="a_email" name="email" class="validate[required]" /></p>
					</form>
				</div>
				<!-- 修改用户 -->
				<div id="_modDIV" title="修改用户" style="display:none;">
					<%-- 该Div的作用就是当点击jqGrid表格中的修改链接时弹出的dialog, 注意是在上面的_updateUser(id)函数中给下面的input赋值 --%>    
					<form id="_modForm" method="post" style="margin-top: 20px;padding:2px;">
					<p>用户名：<input type="text" id="m_regname" name="regname" readonly="readonly" class="validate[required]" /></p>
					<p>姓名：<input type="text" id="m_name" name="name" class="validate[required]" /></p>
					<p>邮箱：<input type="text" id="m_email" name="email" class="validate[required,custom[email]]" /></p>
					<p>是否有效：<input type="radio" name="status" value="1" class="validate[required]" />是 <input type="radio" name="status" value="0" class="validate[required]" /> 否</p>
					</form>
				</div>
			</td>
	</table>
	</body>
</html>